<template>
    <div id="component">
        <Modal v-model="commonModal" :title="commonTitle" width="500px;" :mask-closable="false" :footer-hide="true" :closable="false">
            <div class="msg" v-if="tabIndex == 2">
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>检查名称:</span>
                        <Input  v-model="submit_device_check.name" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>检查部位:</span>
                        <Input  v-model="submit_device_check.part" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>检查时间:</span>
                        <DatePicker  type="date" placeholder="请选择" style="width: 250px" format="yyyy-MM-dd"  v-model="submit_device_check.startTime" :clearable="false"></DatePicker>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>状态:</span>
                        <Select v-model="submit_device_check.state" style="width:250px;" placeholder="请选择状态">
                            <Option v-for="item in stateList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>检查人:</span>
                        <Input  v-model="submit_device_check.opUser" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;align-items: flex-start;">
                        <span>说明:</span>
                        <Input type="textarea"  v-model="submit_device_check.remark" placeholder="请输入" :maxlength="200" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list footer">
                    <div class="item">
                        <el-button @click="close" type="info" size="small" plain>取消</el-button>
                        <el-button @click="handleSubmit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
                    </div>
                </div>
            </div>
            <div class="msg" v-if="tabIndex == 3">
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>使用名称:</span>
                        <Input  v-model="submit_device_use.name" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>使用人:</span>
                        <Input  v-model="submit_device_use.opUser" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>开始时间:</span>
                        <DatePicker  type="date" @on-change="getStartTime" :options="startTimeOptions" placeholder="请选择" style="width: 250px" format="yyyy-MM-dd"   v-model="submit_device_use.startTime" :clearable="false"></DatePicker>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>结束时间:</span>
                        <DatePicker  type="date" :options="endTimeOptions"  placeholder="请选择" style="width: 250px" format="yyyy-MM-dd"  v-model="submit_device_use.endTime" :clearable="false"></DatePicker>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>使用时长(h):</span>
                        <InputNumber :max="999999999" :min="0" v-model="submit_device_use.duration"  style="width: 250px"></InputNumber>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;align-items: flex-start;">
                        <span>说明:</span>
                        <Input type="textarea"  v-model="submit_device_use.remark" placeholder="请输入" :maxlength="200" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list footer">
                    <div class="item">
                        <el-button @click="close" type="info" size="small" plain>取消</el-button>
                        <el-button @click="handleSubmit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
                    </div>
                </div>
            </div>
            <div class="msg" v-if="tabIndex == 4">
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>维护名称:</span>
                        <Input  v-model="submit_device_upkeep.name" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>维护人:</span>
                        <Input  v-model="submit_device_upkeep.opUser" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>维护时间:</span>
                        <DatePicker  type="date" :options="startTimeOptions" placeholder="请选择" style="width: 250px" format="yyyy-MM-dd"  v-model="submit_device_upkeep.startTime" :clearable="false"></DatePicker>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>维护时长(h):</span>
                        <InputNumber :max="999999999" :min="1" v-model="submit_device_upkeep.duration" :maxlength="11" style="width: 250px"></InputNumber>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;align-items: flex-start;">
                        <span>维护结果:</span>
                        <Input type="textarea"  v-model="submit_device_upkeep.remark" placeholder="请输入" :maxlength="200" show-word-limit  style="width: 250px" />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list footer">
                    <div class="item">
                        <el-button @click="close" type="info" size="small" plain>取消</el-button>
                        <el-button @click="handleSubmit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
                    </div>
                </div>
            </div>
            <div class="msg" v-if="tabIndex == 5">
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>拆卸名称:</span>
                        <Input  v-model="submit_device_remove.name" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>拆卸部位:</span>
                        <Input  v-model="submit_device_remove.part" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>拆卸时间:</span>
                        <DatePicker  type="date" :options="startTimeOptions" placeholder="请选择" style="width: 250px" format="yyyy-MM-dd"  v-model="submit_device_remove.startTime" :clearable="false"></DatePicker>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;">
                        <span>拆卸人:</span>
                        <Input  v-model="submit_device_remove.opUser" placeholder="请输入" :maxlength="length" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list">
                    <div class="item" style="width: auto;margin: 5px auto;align-items: flex-start;">
                        <span>说明:</span>
                        <Input type="textarea"  v-model="submit_device_remove.remark" placeholder="请输入" :maxlength="200" show-word-limit  style="width: 250px" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="list footer">
                    <div class="item">
                        <el-button @click="close" type="info" size="small" plain>取消</el-button>
                        <el-button @click="handleSubmit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
                    </div>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: "fseModal",
    data(){
        return{
            startTimeOptions: {
                disabledDate(date) {
                    return date && date.valueOf() > Date.now();
                }
            },
            endTimeOptions: {
                disabledDate: date =>{
                    let endTime = this.submit_device_use.startTime  ? new Date(this.submit_device_use.startTime ).valueOf() - 86400000:"";
                    return date && (date.valueOf() < endTime);
                }
            },
            length:32,
            stateList: [
                {
                    id: 1,
                    name: "正常"
                },
                {
                    id: 0,
                    name: "异常"
                }
            ],//状态列表数据
            checkUserList: [],//检查人列表
            submit_device_check:{//提交设备检查对象
                name:'',//检查名称
                part:'',//检查部位
                startTime:new Date(),//检查时间
                state:1,//设备状态
                opUser: localStorage.getItem('username') ,//检查人
                remark:'',//说明
            },
            submit_device_use:{//提交设备使用对象
                name:'',//使用名称
                opUser:'',//使用人
                startTime:new Date(),//开始时间
                endTime:new Date(),//结束时间
                duration:0,//使用时长
                remark:'',//说明
            },
            submit_device_upkeep:{//提交设备维护对象
                name:'',//维护名称
                opUser:'',//维护人
                startTime:new Date(),//维护时间
                duration:1,//维护时长(h)
                remark:'',//维护结果
            },
            submit_device_remove:{//提交设备拆卸对象
                name:'',//拆卸名称
                part:'',//拆卸部位
                startTime:new Date(),//拆卸时间
                opUser:'',//拆卸人
                remark:'',//说明
            },
        }
    },
    props:{
        commonModal:{
            type:Boolean,
            default:false
        },
        //自定义切换栏下标
        tabIndex:{
            type:Number,
            default:0
        },
        //公共弹框标题
        commonTitle:{
            type:String,
            default:''
        },
        //编辑节流阀
        editFlag:{
            type:Boolean,
            default:false
        },
        //编辑对象
        editData:{
            type:Object,
            default:()=>{
                return {}
            }
        }

    },
    mounted() {
    },
    methods:{
        getStartTime(index) {
            this.submit_device_use.startTime = index;
            this.endTimeOptions = {
                disabledDate: date =>{
                    let endTime = this.submit_device_use.startTime  ? new Date(this.submit_device_use.startTime ).valueOf() - 86400000:"";
                    return date && (date.valueOf() < endTime);
                }
            }
        },
        //弹框关闭
        close(){
            this.$emit("handleClose",false)
        },
        //数据重置
        initData(active,editData,editFlag){
            if(active == 2){
                if(editFlag){
                    let obj = {};
                    for (const key in editData) {
                        obj[key] = editData[key];
                    }
                    this.submit_device_check = obj;
                }else{
                    this.submit_device_check = {//提交设备检查对象
                        name:'',//检查名称
                        part:'',//检查部位
                        startTime:new Date(),//检查时间
                        state:1,//设备状态
                        opUser: localStorage.getItem('username') ,//检查人
                        remark:'',//说明
                    };
                }
            }else if(active == 3){
                if(editFlag){
                    let obj = {};
                    for (const key in editData) {
                        obj[key] = editData[key];
                    }
                    this.submit_device_use = obj;
                }else{
                    this.submit_device_use = {//提交设备使用对象
                        name:'',//使用名称
                        opUser:'',//使用人
                        startTime:new Date(),//开始时间
                        endTime:new Date(),//结束时间
                        duration:0,//使用时长
                        remark:'',//说明
                    };
                }
            }else if(active == 4){
                if(editFlag){
                    let obj = {};
                    for (const key in editData) {
                        obj[key] = editData[key];
                    }
                    this.submit_device_upkeep = obj;
                }else{
                    this.submit_device_upkeep = {//提交设备维护对象
                        name:'',//维护名称
                        opUser:'',//维护人
                        startTime:new Date(),//维护时间
                        duration:1,//维护时长(h)
                        remark:'',//维护结果
                    };
                }
            }else if(active == 5){
                if(editFlag){
                    let obj = {};
                    for (const key in editData) {
                        obj[key] = editData[key];
                    }
                    this.submit_device_remove = obj;
                }else{
                    this.submit_device_remove = {//提交设备拆卸对象
                        name:'',//拆卸名称
                        part:'',//拆卸部位
                        startTime:new Date(),//拆卸时间
                        opUser:'',//拆卸人
                        remark:'',//说明
                    };
                }
            }
        },
        handleSubmit(){
            let params = {};
            if(this.tabIndex == 2){
                params = this.submit_device_check;
            }else if(this.tabIndex == 3){
                params = this.submit_device_use;
            }else if(this.tabIndex == 4){
                let number = /^(?!0*1\.0+$)(?=0*[1-9])\d{1,3}\.\d{1}$/
                if(number.test(this.submit_device_upkeep.duration)){
                    params = this.submit_device_upkeep;
                }else{
                    this.$message.error('维护时长需大于等于1，且保留1为小数')
                    return false
                }
            }else if(this.tabIndex == 5){
                params = this.submit_device_remove;
            }
            this.$emit('handleSubmit',this.tabIndex,params,false)
        },
    },
    watch:{
        // 监听对话框状态变化
        commonModal(val,old){
            if(val){
                this.initData(this.tabIndex,this.editData,this.editFlag);
            }
        }
    }


}
</script>

<style scoped lang="less">
@import "./../../assets/style/fse_msg.less";
@import "./../../assets/style/themeBase.less";
</style>
